iT邦幫忙

2025 iThome 鐵人賽
DAY 16
0
Modern Web

融合AI圖像生成技術的前端開發實戰系列 第 16 篇

DAY16

17th鐵人賽
25 瀏覽

  • 分享至 

  • xImage
    •  

before/after 效果的前端設計

在這篇文章中，我們將專注於 Before/After 效果 的前端設計，實現圖片上傳、提示詞輸入、生成按鈕與結果展示的頁面結構與樣式。

功能需求
Before/After 效果的前端需求如下：

  1. 圖片上傳：使用者可以上傳一張圖片。
  2. 提示詞輸入：使用者可以輸入希望對圖片進行的變化描述。
  3. 結果展示：以 Before/After 的方式展示原圖與生成圖。
  4. 下載功能：提供下載原圖、生成圖與對比圖的功能。

HTML結構

以下是 before_after.html 的主要結構：
https://ithelp.ithome.com.tw/upload/images/20250930/20168630UX7cO863v8.png

CSS樣式

以下是 before_after.css 的部分樣式：
https://ithelp.ithome.com.tw/upload/images/20250930/20168630I4uEnI9ShE.png
https://ithelp.ithome.com.tw/upload/images/20250930/20168630uFqyyKiFfb.png

在這篇文章中，我們完成了 Before/After 效果的前端設計，包含 HTML 結構與 CSS 樣式。在下一篇文章中，我們將實現前端的 JavaScript 邏輯，處理圖片上傳、生成請求與結果展示。


上一篇
DAY15
下一篇
DAY17
系列文
融合AI圖像生成技術的前端開發實戰 共 23 篇
  1. 19
    DAY19
  2. 20
    DAY20
  3. 21
    DAY21
  4. 22
    DAY22
  5. 23
    DAY23
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
16875 篇
完賽人數
198 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 17th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙